<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>八面来风</title>
		<link href="css/text.css" rel="stylesheet" type="text/css" />
		<style type="text/css">				
			.fixedBox{
				border: 5px solid #555555;				
				
			}
			.fixedBox::-webkit-scrollbar {
				width: 10px;     
				height: 10px;				
			}	
			
			a span{float: right; color: #fff;}
			li{margin-top:5px;} 
			a:link {color: #FFE4B5;}

			#box {
				position: absolute;
				top: 100px;
				left: 300px;
				width: 500px;
				height: 300px;
				padding: 5px;
				border: #00cdcd 2px solid;
				box-sizing: border-box;
				background-color: #000;
				display: none;
			}
			#bar {
				padding-left:5px; 
				height: 30px;
				line-height: 30px;				
				background-color: #DC143C;
				cursor: move;
			}
			
			#content { 
				width: 98%;
				height: calc(100% - 40px);
				background-color: #eee;
			}
		</style>		
		<script type="text/javascript" src="js/json2html.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
	</head>
	<body id="body">
		<div id="towriter" class="fixedBox" style="border: #fff 2px solid;">
			<div id="towrite" class="fixedBox"></div>
			<div id="box" style="background:#fff;">
				<div id="bar"></div>
				<div id="content">
					<iframe id="mapIframe" ></iframe>
				</div>
			</div>	
		</div>		
		<script>
			window.onload = function() {				
				changeStyle();
				getSource();
			}
				
			function changeStyle() {
				var obj = document.getElementById("towriter");				
				obj.style.left = "0px"; 				
				obj.style.width = "100%";	
				//obj.style.height = "620px";		
				//obj.style.fontSize ="14px";			
				
				var obj = document.getElementById("towrite");				
				obj.style.left = "0px"; 				
				obj.style.width = "96%";	
				//obj.style.height = "620px";		
				obj.style.fontSize ="14px";	
				
				var iframe = document.getElementById("mapIframe");
				iframe.style.margin = "-10px 0px 3px -10px";
				iframe.style.width = "100%";
				iframe.style.height = "98%";
				iframe.style.background="#fff";
			}
			
			
			<!-- $(function() { -->
				<!-- setInterval(function() { -->
					<!-- getSource(); -->
				<!-- }, -->
				<!-- 500); -->
			<!-- }) -->
			
			var gpdm = "";
			var gpmc = "";
			var dm ="";	
			function getSource() {								
				var u = decodeURI(window.location.href);								
				if(u.indexOf("##") > -1){
					var gp = u.split('##');				
					dm = gp[1];
					gpmc = gp[2];															
				}else{
					dm = "600000";
					gpmc = "浦发银行";					
				}
				if(dm != gpdm){
					gpdm = dm;
					var sc = "";
					if(gpdm.substr(0 , 1) == "6"){				
						sc = "SH";
					}else{					
						sc = "SZ";
					}			

					var url = "http://webf10.gw.com.cn/" + sc + "/B6/" + sc + dm + "_B6.html";					
					xmlHttp = new XMLHttpRequest();							
					xmlHttp.open("GET", url, false);  //同步方式
					xmlHttp.send(null);																		
					var data = xmlHttp.responseText
					var ss = data.split("<ul id = \"newsTitleListTemp\" style='display: none;'>")[1].split("</ul>")[0];
					ss = ss.replace(/onclick="/g,'onclick="changeCss(this,\'towrite\');getbt(this);');
					var div = document.getElementById('towrite');
					div.innerHTML = "<font size='3' style=color:#FFFF00;>八面来风：<font size='2' color=#fff>&nbsp;&nbsp;&nbsp;&nbsp;" + gpdm + "&nbsp;&nbsp;" + gpmc + "</font></font>";										
					div.innerHTML += ss;
										
					div.scrollTop = 0; //回到顶部
					
					var newDiv = document.createElement("div");
					newDiv.id = "box1";
					newDiv.style.display = "none";
					newDiv.style.position = "absolute";
					newDiv.style.left = "0px";
					newDiv.style.top = "0px";
					newDiv.style.width = "96%";
					newDiv.style.height = "100%";
					newDiv.style.background = "#fff";
					document.getElementById('towriter').appendChild(newDiv);
					
					var newDiv1 = document.createElement("div");
					newDiv1.id = "bar1";
					newDiv1.style.paddingLeft = "5px"; 
					newDiv1.style.lineHeight = "30px";									
					newDiv1.style.background = "#DC143C"; 				
					newDiv.appendChild(newDiv1);
					
					var newDiv2 = document.createElement("div");
					newDiv2.id = "content1";
					newDiv2.style.paddingLeft = "5px";
					newDiv2.style.width = "98%";
					newDiv2.style.height = "calc(100% - 40px)";
					newDiv2.style.background = "#eee";				
					newDiv.appendChild(newDiv2);
					
					var iframe = document.createElement("iframe");
					iframe.id = "mapIframe1";
					iframe.style.paddingLeft = "5px";
					iframe.style.width = "100%";
					iframe.style.height = "98%";
					iframe.style.background="#fff";
					newDiv2.appendChild(iframe);					
				}
			}
			
			//"<li><a href="javascript:void(0);" onclick="popupNewsDetail('NEWS','20230616','6356310')"><span>2023-06-16</span> 2022（第十届）银行综合评选获奖名单出炉 这些银行机构成为行业佼佼者</a></li>"
			//"http://webf10.gw.com.cn/NEWS/20230616/6356310.html"
			
			function popupNewsDetail(zxtype,riqi,newsid){			
				//var url = "http://webf10.gw.com.cn/" + zxtype + "/" + riqi + "/" + newsid + ".html";
				//var url = "http://www.treeid/dlghttp://webf10.gw.com.cn/" + zxtype + "/" + riqi + "/" + newsid + ".html" + "&tdxmyietitle="+xwbt+"&tdxmyieleft=900&tdxmyietop=58&tdxmyiewidth=588&tdxmyieheight=838&noborder=0&closenoactive=0&padmode=1";				
				//window.open(url,'_self');
				//window.open(url,xwbt,"width=450,height=320,menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1");
				var url = "http://webf10.gw.com.cn/" + zxtype + "/" + riqi + "/" + newsid + ".html"
				showInform(url);
			}
			
			var xwbt = "";
			function getbt(obj){				
				var ss = obj.innerHTML;
				ss = ss.split("</span>")[1];
				xwbt = ss;
				<!-- var n = 30; -->
				<!-- if(ss.length <= n){ -->
					<!-- xwbt = ss; -->
				<!-- }else{ -->
					<!-- xwbt = ss.substr(0,n) + "……"; -->
				<!-- }				 -->
			}
			
			function changeCss(obj,id){				
				var alist = document.getElementById(id).getElementsByTagName("a");					
				for(var i = 0; i < alist.length; i++){
					if(alist[i].innerText != "弹出显示"){
						alist[i].style.color = "#FFDEAD"; //给所有a标签赋原色
					}
				}
				obj.style.color = "#00FFFF"; //令当前标签高亮				
			}
			
			function showInform(url){				
				var div = document.getElementById('box');
				div.style.display = 'block';
				div.style.fontSize = "12px";
				
				var div1 = document.getElementById('bar');							
				var gb = '<a href="javascript:close();" style="float:right; margin-top:-3px;color:#fff;font-size:26px;">×</a>';	
				var sf = '<a href="javascript:updatex(1);"  id="sf" style="float:right; margin-top:-3px;color:#fff;font-size:26px;">□</a>';				
				//div1.innerHTML = "<font style='color:#fff;'>" + xwbt +"</font>" + gb + sf;
				var bt = "<div style='position:absolute;width:80%;height:30px;overflow:hidden;color:#fff;'>" + xwbt + "</div>";
				div1.innerHTML = bt + gb + sf;
				
				var iframe = document.getElementById('mapIframe');
				iframe.src = url;
				
				var div2 = document.getElementById('bar1');
				var hy = '<a href="javascript:updatex(2);"  id="hy" style="position:relative;float:right; margin-top:-3px;color:#fff;font-size:26px;">○</a>';				
				bt = "<div style='float:left;width:80%;height:30px;overflow:hidden;color:#fff;'>" + xwbt + "</div>";				
				div2.innerHTML = "<div style='width:100%;height:30px;'>" + bt  + "<div style='float:right;width:70px;height:30px;'>" + gb + hy + "</div></div>";
				
				var iframe1 = document.getElementById('mapIframe1');
				iframe1.src = url;
			}
			
			
			function close() { 
				var div = document.getElementById("box");						
				div.style.display = "none";
				var div1 = document.getElementById("box1");						
				div1.style.display = "none";
			}
			
			function updatex(p) {
				var div = document.getElementById('box');
				var div1 = document.getElementById('box1');
				if(p == 1){
					div.style.display = "none";
					div1.style.display = "block";
				}else{
					div.style.display = "block";
					div1.style.display = "none";
				}				
			}
		</script>
		<script>
		var dragBox = function (drag, wrap) {

			function getCss(ele, prop) {
				return parseInt(window.getComputedStyle(ele)[prop]);
			}

			var initX,
			initY,
			dragable = false,
			//wrapLeft = getCss(wrap, "left"),
			wrapTop = getCss(wrap, "top");
			removeEventListener
			drag.addEventListener("mousedown", function (e) {
				wrapLeft = getCss(wrap, "left"),  //获取box启动后坐标
				
				dragable = true;
				initX = e.clientX;
				initY = e.clientY;
			}, false); 
			
			document.addEventListener("mousemove", function (e) {		
				if (dragable === true ) {
					var nowX = e.clientX,
					nowY = e.clientY,
					disX = nowX - initX,
					disY = nowY - initY;
					wrap.style.left = wrapLeft + disX + "px";
					wrap.style.top = wrapTop + disY + "px";
				}
			});

			drag.addEventListener("mouseup", function (e) {
				dragable = false;
				wrapLeft = getCss(wrap, "left");
				wrapTop = getCss(wrap, "top");
				}, false); 
		};

		dragBox(document.querySelector("#bar"), document.querySelector("#box"));
		
    </script>
	<script>
		//需要调整尺寸的div
		let c = document.getElementById('box')
		// body监听移动事件
		document.getElementById('body').addEventListener('mousemove', move)
		// 鼠标按下事件
		c.addEventListener('mousedown', down)
		// 鼠标松开事件
		document.getElementById('body').addEventListener('mouseup', up)

		// 是否开启尺寸修改
		let resizeable = false
		// 鼠标按下时的坐标，并在修改尺寸时保存上一个鼠标的位置
		let clientX, clientY
		// div可修改的最小宽高
		let minW = 8, minH = 8
		// 鼠标按下时的位置，使用n、s、w、e表示
		let direc = ''

		// 鼠标松开时结束尺寸修改
		function up() {
			resizeable = false
			dragBox(document.querySelector("#bar"), document.querySelector("#box"));			
		}

		// 鼠标按下时开启尺寸修改
		function down(e) {
			let d = getDirection(e)
			// 当位置为四个边和四个角时才开启尺寸修改
			if (d !== '') {
				resizeable = true
				direc = d
				clientX = e.clientX
				clientY = e.clientY
			}
		}

		// 鼠标移动事件
		function move(e) {			
			let d = getDirection(e)
			let cursor
			if (d === '') cursor = 'default';
			else cursor = d + '-resize';
			// 修改鼠标显示效果
			c.style.cursor = cursor;
			// 当开启尺寸修改时，鼠标移动会修改div尺寸
			if (resizeable) {
				// 鼠标按下的位置在右边，修改宽度
				if (direc.indexOf('e') !== -1) {
					c.style.width = Math.max(minW, c.offsetWidth + (e.clientX - clientX)) + 'px'
					clientX = e.clientX
				}

				// 鼠标按下的位置在上部，修改高度
				if (direc.indexOf('n') !== -1) {
					c.style.height = Math.max(minH, c.offsetHeight + (clientY - e.clientY)) + 'px'
					c.style.top = c.offsetTop + (e.clientY - clientY) + "px";
					clientY = e.clientY
				}
				// 鼠标按下的位置在底部，修改高度
				if (direc.indexOf('s') !== -1) {
					c.style.height = Math.max(minH, c.offsetHeight + (e.clientY - clientY)) + 'px'
					clientY = e.clientY
				}

				// 鼠标按下的位置在左边，修改宽度
				if (direc.indexOf('w') !== -1) {
					c.style.width = Math.max(minW, c.offsetWidth + (clientX - e.clientX)) + 'px'
					//clientX = e.clientX
					c.style.left = c.offsetLeft + (e.clientX - clientX) + "px";
					clientX = e.clientX
				}

			}
		}

		// 获取鼠标所在div的位置
		function getDirection(ev) {
			let xP, yP, offset, dir;
			dir = '';

			xP = ev.offsetX;
			yP = ev.offsetY;
			offset = 10;

			if (yP < offset) dir += 'n';
			else if (yP > c.offsetHeight - offset) dir += 's';
			if (xP < offset) dir += 'w';
			else if (xP > c.offsetWidth - offset) dir += 'e';

			return dir;
		}
	</script>
	</body>
</html>